<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-05-26 08:09:20
 * @LastEditors: cxguo
 * @LastEditTime: 2020-08-03 14:19:43
-->
<template>
  <div id="round_chart_container" />
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
  },
  data() {
    return {}
  },
  methods: {
    getChartInstance() {
      const el = document.getElementById('round_chart_container')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(el, 'macarons')
      return myChart
    },
    initChart(data) {
      const myChart = this.getChartInstance()
      // 绘制图表
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data.map(item => { return item.name })
        },
        series: {
          name: '仓库存货',
          type: 'pie',
          radius: '60%',
          label: {
            formatter: (params) => {
              const { data } = params
              return `${data.name}-${data.value}`
            }
          },
          data: data
        }
      })
    }
  }
}
</script>

<style scoped>
  #round_chart_container{
      width: 600px;
      height:400px;
  }
</style>
